<template>
  <div class="design-file">
    <div class="title">
      <span>{{ locale.studio.design.modules }}</span>
      <el-icon @click="hideThis">
        <Close/>
      </el-icon>
    </div>
    <el-tabs v-model="activeName" class="design-file-tab">
      <el-tab-pane label="PC" name="PC" :lazy="true">
        <yv-vjson-tree ref="_inner" :vjson="treeVJson" :vcxt="vcxtOfTree" @node-click="openPcModule"
                       @contextMenu="contextMenu" class="design-file-tree"/>
      </el-tab-pane>
      <el-tab-pane label="PDA" name="PDA" :lazy="true">
        <yv-vjson-tree ref="_innerPDA" :vjson="pdaTreeVJson" :vcxt="vcxtOfTree" @node-click="openPdaModule"
                       @contextMenu="contextMenu" class="design-file-tree"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import _ from 'lodash'
import VJsonContext from "../../runtime/VJsonContext"
import {Close, Refresh} from '@element-plus/icons-vue'
import {renderIcon} from "@/components/web/webutils"
import {buildFileTreeData} from "@/utils";
import YvI18nMixin from "@/components/YvI18nMixin";

export default {
  mixins: [YvI18nMixin],
  components: {
    Refresh, Close
  },
  props: {
    vjson: Object,
    vcxt: VJsonContext
  },
  data() {
    const vcxtOfTree = new VJsonContext()
    const me = this

    return {
      activeName: 'PC',
      vcxtOfTree,
      contextMenuData: null,
      treeVJson: {
        defaultExpandAll: true,
        checkStrictly: true,
        enableFilter: true,
        data: [],
        getIconName: (node, data) => {
          switch (data.type) {
            case "Dir":
              return "Folder"
            case "Module":
              return "Postcard"
          }
          return "DocumentDelete";
        },
        listeners: {
          afterrender() {
            me.reloadPcModule()
          }
        },
      },
      pdaTreeVJson: {
        defaultExpandAll: true,
        checkStrictly: true,
        enableFilter: true,
        data: [],
        getIconName: (node, data) => {
          switch (data.type) {
            case "Dir":
              return "Folder"
            case "Module":
              return "Postcard"
          }
          return "DocumentDelete";
        },
        listeners: {
          afterrender() {
            me.reloadPdaModule()
          }
        },
      },
    }
  },
  computed: {},
  mounted() {
    this.$refs._inner.loading = true
  },
  methods: {
    renderIcon,
    reloadPcModule() {
      this.$refs._inner.loading = true

      const designJsList = []
      _.forOwn(window['designJS'], (value, key) => {
        designJsList.push(key)
      })

      const treeData = buildFileTreeData('', designJsList)
      this.$refs._inner.setData(treeData)

      this.$refs._inner.loading = false
    },
    reloadPdaModule() {
      this.$refs._innerPDA.loading = true
      debugger
      this.$refs._innerPDA.setData([])
    },
    contextMenu(data) {
      this.contextMenuData = data;
    },
    hideThis() {
      this.$emit('hideThis')
    },
    openPcModule() {
    },
    openPdaModule() {
    },
  }
}
</script>
<style lang="less">
.newModuleForm .el-form-item {
  width: 100%;
}

.design-file {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .title {
    height: 38px;
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;

    span {
      margin-left: 10px;
      font-size: 16px;
      color: #000;
      font-weight: bold;
    }

    .el-icon {
      font-size: 16px;
      position: relative;
      cursor: pointer;
      top: 11px;
      margin-right: 10px;
    }
  }

  .design-file-tab {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .el-tabs__header {
      margin: 0 0 5px 0;

      .el-tabs__nav-scroll {
        .el-tabs__item {
          padding: 0 10px;

          &.is-active {
            color: #000;
            font-weight: 500;
          }

          &:hover {
            color: var(--main-color);
          }
        }

        .el-tabs__active-bar {
          background-color: var(--main-color);
        }
      }
    }

    .el-tabs__content {
      flex: 1;
      overflow: hidden;

      & > .el-tab-pane {
        width: 100%;
        height: 100%;

        .design-file-tree {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          overflow: hidden;

          & > .el-row {
            margin: 5px 8px;

            .el-input {
              .el-input__wrapper {
                border-radius: 0;
              }
            }
          }

          & > .el-scrollbar {
            flex: 1;
            overflow: auto;

            .el-tree {
              background: var(--sub-header-color);

              .el-tree-node.is-current > .el-tree-node__content {
                background: #d7d7d7;
                color: #000;
              }

              .el-tree-node__content {
                height: 30px;
                font-size: 14px;
                font-weight: 300;

                &:hover {
                  background: #d7d7d7;
                  color: #000;
                }

                .el-icon {
                  position: relative;
                  top: 3px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.register {
  .el-main {
    padding: 0;
  }

  .register-form.el-form--inline {
    .el-form-item {
      margin-right: 0
    }
  }
}
</style>